<template>
  <div class="history-record-page">
    <van-nav-bar title="历史记录" left-text="返回" left-arrow fixed>
      <template #left>
        <van-icon
          name="arrow-left"
          size="18"
          color="#333"
          @click="$router.go(-1)"
        />
      </template>
    </van-nav-bar>

    <div class="content">
      <div class="record-list">
        <div
          v-for="(record, index) in recordList"
          :key="index"
          class="record-item"
          @click="viewRecordDetail(record)"
        >
          <div class="record-info">
            <div class="address">{{ record.address }}</div>
            <div class="date-info">
              <van-icon name="notes-o" size="16" color="#999" />
              <span class="date">{{ record.date }}</span>
            </div>
          </div>
          <div class="record-status">
            <div class="status-tag" :class="getStatusClass(record.status)">
              {{ record.status }}
            </div>
            <van-icon name="arrow" size="16" color="#ccc" class="arrow-icon" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recordList: [
        {
          id: 1,
          address: "上海市黄浦区xx弄xx号",
          date: "2025-06-30",
          status: "待审核",
        },
        {
          id: 2,
          address: "上海市黄浦区xx弄xx号",
          date: "2025-05-30",
          status: "待提交",
        },
        {
          id: 3,
          address: "上海市黄浦区xx弄xx号",
          date: "2025-04-30",
          status: "审核通过",
        },
      ],
    };
  },
  methods: {
    getStatusClass(status) {
      const statusMap = {
        待审核: "status-warning",
        待提交: "status-warning",
        审核通过: "status-success",
      };
      return statusMap[status] || "status-default";
    },
    viewRecordDetail(record) {
      console.log("查看记录详情:", record);
      // 跳转到任务单上报页面，携带记录ID
      this.$router.push({
        path: "/reportHome",
        query: {
          id: record.id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.history-record-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-top: 46px; // 导航栏高度

  .content {
    padding: 16px;
  }

  .record-list {
    .record-item {
      background: #fff;
      border-radius: 8px;
      padding: 16px 0 16px 16px;
      margin-bottom: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-1px);
      }

      &:active {
        transform: translateY(0);
      }

      .record-info {
        flex: 1;

        .address {
          font-size: 16px;
          font-weight: 500;
          color: #333;
          margin-bottom: 8px;
          line-height: 1.4;
        }

        .date-info {
          display: flex;
          align-items: center;
          gap: 4px;

          .date {
            font-size: 14px;
            color: #999;
          }
        }
      }

      .record-status {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;

        .status-tag {
          border-radius: 15px 0 0 15px;
          font-size: 12px;
          padding: 6px 12px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-weight: 500;
          min-height: 24px;

          &.status-warning {
            background-color: #fff1de;
            color: #fb9a0e;
          }

          &.status-success {
            background-color: #e0faea;
            color: #30a46c;
          }

          &.status-default {
            background-color: #f0f0f0;
            color: #666;
          }
        }

        .arrow-icon {
          margin-top: 4px;
        }
      }
    }
  }
}
</style>
